<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>

<head>
  <title>新星养殖场管理中心</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!-- 引入样式 -->
  <!-- <link rel="stylesheet" href="lib/elementui/theme-chalk/index.css" type="text/css"> -->
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="./static/css/style.css">
  <style>
    /* 所有 */
    #app {
      width: 100%;
    }

    .footer {
      width: 100%;
      position: relative;
      height: 150px;
      background-color: rgba(0, 0, 0, 0.8);
      color: rgba(255, 255, 255, 0.8);
    }

    .footer-left {
      position: relative;
      padding: 10px;
      margin-left: 200px;
      width: 600px;
    }

    .footer-left-link {
      position: relative;
      margin-top: 20px;
    }

    .footer-left-link-item {
      margin: 10px;
      font-size: 15px;
    }

    .login {
      transition: 0.3s;
      transform: translateY(5px);
      -ms-transform: translateY(5px);
      -webkit-transform: translateY(5px);
      position: absolute;
      left: 5%;
      width: 400px;
      top: 30%;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 10px;
      padding-right: 20px;
    }

    .login:hover {
      -moz-box-shadow: 0 2px 40px -24px rgba(0, 36, 100, 1);
      box-shadow: 0 2px 40px -24px rgba(0, 36, 100, 1);
      transition: 0.3s;
      transform: translateY(-5px);
      -ms-transform: translateY(-5px);
      -webkit-transform: translateY(-5px);
    }

    .logo {
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="app">
    <img class="logo" src="./static/imgs/logo.png" alt="">
    <div>


      <div class="login">
        <h1 style="color: rgba(0,0,0,0.7); text-align: center;">新星养殖场管理中心</h1>
        <el-form label-width="80px" :model="loginform">
          <el-form-item label="名称：">
            <el-input v-model="loginform.name"></el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="pass">
            <el-input type="password" v-model="loginform.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="账户：">
            <el-select v-model="loginform.type" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 60%;" type="success" @click="submitForm">登陆</el-button>
            <span style="color:rgba(0,0,0,0.3)"><a href="resetpass.jsp">重置密码</a> </span>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
  <!-- 引入组件库 -->
  <script type="text/javascript" src="lib/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script>
  <script type="text/javascript">
    new Vue({
      el: "#app",
      data: {
        tabPosition: "left",
        options: [{
          value: '1',
          label: '饲养员'
        }, {
          value: '2',
          label: '采购员'
        }, {
          value: '3',
          label: '疫苗员'
        }, {
          value: '4',
          label: '销售员'
        }, {
          value: '5',
          label: '管理员'
        }],
        loginform: {
          pass: "",
          name: "",
          type: ""
        },
      },
      methods: {
        submitForm() {
          axios.post("/login", this.loginform).then(res => {
            console.log(res);
            console.log(this.loginform);
            let { result, userbase } = res.data;

            if (result == "1001") {

              console.log( JSON.stringify (userbase))
              localStorage.setItem("userbase",  userbase)
              this.$notify.success({
                title: '登陆信息',
                message: '登录成功，正在跳转'
              })
              window.location.href = "/"
            } else {
              this.$notify.error({
                title: '登陆信息',
                message: '登陆失败，用户不存在或密码错误'
              })
            }
          })
        },
        resetpass() {
        },
        regist() {
          window.location.href = "/regist.jsp"
        }
      }
    });
  </script>
</body>

</html>